<template>
  <div>
      <table border="1">
          <tr>
              <th>车牌号</th>
              <th>进入时间</th>
              <th>离开时间</th>
              <th>费用</th>
              <th>操作</th>
          </tr>
          <tr v-for="record in record_list" :key="record.id">
              <td>{{record.car_sn}}</td>
              <td>{{record.start}}</td>
              <td>{{record.end}}</td>
              <td>{{record.amount}}</td>
              <td><input type="button" value="离开" @click="end(record.id)"><input type="button" value="升级" @click="update(record.car_sn)"></td>
          </tr>
      </table>
      <div>
          <a @click="pre">上一页</a>
          <a v-for="num in max_page" :key="num" class="one" @click="change(num)">{{num}}</a>
          <a @click="next">下一页</a>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            record_list:[],
            max_page:0,
            current_page:1,
        }
    },created(){
        this.change(1)
    },
    methods:{
        pre(){
            if(this.current_page<=1){
                return 
            }else{
                this.change(this.current_page-1)
            }
        },
        next(){
            if(this.current_page>=this.max_page){
                return
            }else{
                this.change(this.current_page+1)
            }
        },
        end(id){
            this.axios.put("/record",{"id":id}).then(resp=>{
                console.log(resp.data)
                this.$router.go(0)
            }).catch(error=>{
            console.log(error)
        })
        },
        update(car_sn){
            this.axios.post("/user",{"car_sn":car_sn}).then(resp=>{
                console.log(resp.data)
            }).catch(error=>{
                console.log(error)
            })
        },
        change(num){
            this.current_page=num
            this.axios.get("/record?page="+num).then(resp=>{
            console.log(resp.data)
            this.record_list=resp.data.data
            this.max_page=resp.data.max_page
        }).catch(error=>{
            console.log(error)
        })
        }
    }
}
</script>

<style>
.one{
    padding: 5px 20px;
    border: 1px solid lightblue;
    margin: 10px;
}
</style>